<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid #999;
            position: relative;
        }
        .fj1 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: yellowgreen;
            position: absolute;
        }
        .fj2 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            color: orange;
            position: absolute;
        }
    </style>
</head>
<body>
    <table class="table1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小阿豪</td>
                <td>男</td>
                <td>19</td>
            </tr>
            <tr>
                <td>星马烈</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小美</td>
                <td>女</td>
                <td>16</td>
            </tr>
        </tbody>
    </table>
    <div class="content"></div>
    <button onclick="add()">生成敌机</button>
    <button onclick="up()">升级敌机</button>
    <button onclick="clear11()">销毁敌机</button>
    <div class="div1"></div>

    <script>
        var tab1 = document.querySelector('.table1');
        var content = document.querySelector('.content');
        var div1 = document.querySelector('.div1');
        var tab2 = tab1.cloneNode(true);
        content.appendChild(tab2);

        function add() {
            // 生成敌机
            var fj = document.createElement('div');
            fj.className = 'fj1';
            fj.style.left = '100px' // 随机
            fj.style.top = '5px'
            // 添加到div1中
            div1.appendChild(fj);
        }

        function up() {
            // 用一个更高级的飞机替换原来的
            var fj_old = document.querySelector('.fj1'); // 老飞机
            var fj_new = document.createElement('div');
            fj_new.innerHTML = '✈️';
            fj_new.className = 'fj2';
            div1.replaceChild(fj_new, fj_old); // 用新飞机替换老飞机
        }

        function clear11() {
            // 销毁--干掉新的如果没有新的 就删除老的
            var fj = null;
            if(document.querySelector('.fj2')) { // 新飞机存在
                fj = document.querySelector('.fj2')
            }else if(document.querySelector('.fj1')) { // 老飞机存在
                fj = document.querySelector('.fj1')
            }else {
                alert('通关了 卸载吧')
                return
            }
            if(fj) {
                // 还有飞机存在
                div1.removeChild(fj)
            }
        }
    </script>
</body>
</html>